<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>fjjlovewyf</title>
    <style>
        * { margin: 0; touch-action: none; }
        body ,.yanchi { display: flex; flex-direction: column; align-items: center; background: #000;  position:absolute; width: 100%; height: 100%; overflow: hidden;}
        #canvas { background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
        .tools { margin: 15px; display: flex; gap: 10px; }
        button { padding: 8px 15px; border: 1px solid #ddd; background: white; cursor: pointer; }

        

        #c{ position:absolute; width: 100%; height: 100%; z-index: 2;opacity: 0.2; filter: blur(4px);}
        #zhengtu{ position:absolute; width: 100%; height: 100%; z-index: 1;  opacity: 0.6; transition: all 2s; transform: scale(2,2);}
        .a{ width: 80%; }
        .tt{ color: #fff; text-align: center; width: 80%;}
        .qing{ position:absolute; width: 100%; height: 100%; overflow: hidden;  display:none;  z-index:103;}
        .qing .title{ position:absolute; z-index: 1; width: 100%; height: 40px; color: #fff; background-color: rgba(0,0,0,0.5); text-align: center; line-height: 40px; font-size: 14px;}
        .qing #canvas{ background-color: #ccc; position:absolute; width: 100%; height: 100%; overflow: hidden; top: 0px;}
        .button{ position:absolute; bottom: 0px; right: 0;}

        .luokuanrenwarp{ width: 100%; padding-top: 100px; position:relative;}
        .luokuanrenwarp >   *{ float: left;}

        .luokuanren{ width: 20%;}
        .fjj{ width: 40%;}
        .and{ position:absolute; left: 40%; top: 200px;}
        .luokuanren{ position:absolute; left: -40px; top: 100px; width: 100px;}

        .buttonqianming{ position:absolute; bottom:20px; width: 80px; color: #fff; background-color: #000; right: 20px; z-index: 100; opacity: 0.6;  border: none;}
    
    
    
    
        .div-with-inner-shadow {
  position:absolute; /* 需要设置相对定位 */
  z-index: 1000;
  width: 100%;
  height: 100%;
  pointer-events: none; 
}
 
.div-with-inner-shadow::before {
    pointer-events: none; 
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit; /* 继承父元素的背景 */
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 1); /* 创建内部阴影 */
  z-index: -1; /* 确保阴影在内容之下 */
}


#a2,#a3,#a4,#a5,#a6,#wyf,#a2{opacity: 0; transition: all 0.5s; }



    </style>
</head>
<body>

    <div class="div-with-inner-shadow">
        <!-- 内容 -->
      </div>

    <div class="yanchi">
        <img src="t.png" class="a" id="a2"/>
        <div class="tt">
            <div  id="a3">
                冯俊杰和王一帆要永远在一起！！我冯俊杰发誓要守护王一帆，一辈子。她的笑容由我来守护。
            </div>

            <div class="luokuanrenwarp">
                <div class="luokuanren"  id="a4">
                    落款人：
                </div>
                <img src="fjj.png" class="fjj" style="margin-left: 10%"   id="a5"/>
                <div class="and"  id="a6">AND</div>
                <img src="" class="fjj" id="wyf"  />
            </div>
        </div>
    

        <div class="button " >
            <button class="buttonqianming" onclick="dakai()">签名</button>
        </div>

    </div>

    <canvas id="c"></canvas>

    <canvas id="zhengtu"></canvas>
    
    <div class="qing" >
        <div class="title">触屏屏幕，签上帆帆的名字~</div>
        <canvas id="canvas"></canvas>
        <div class="button">
            <button onclick="qingchu()">清空</button>
            <button onclick="save()">保存</button>
        </div>
    </div>
<script src="c.js">

</script>
<script>

function update(){
    var wyf = document.getElementById('wyf');
    wyf.src = 'https://api.fengjunjie.com.cn/wyf.png?time='+( Date.parse(new Date()));

}
update();

var screenHeight = window.innerHeight;
var screenWidtht = window.innerWidth;


function dakai(){
    var qing = document.querySelector('.qing');
    qing.style.display = 'block'


}

var c=document.getElementById("zhengtu");
var ctx2=c.getContext("2d");
c.width = screenWidtht;
c.height = screenHeight;

var img= new Image();
img.src = 'bg.jpg';
img.onload = function(){
    if(window.parent.loadingText)window.parent.loadingText(0);
    let bi = screenHeight/img.height;
    console.log(bi,img.height*bi);
    ctx2.drawImage(img,-screenWidtht,0,img.width*bi,img.height*bi);
    
}

window.addEventListener('message', receiveMessage, false);
 
function receiveMessage(event) {
    c.style.transform = 'scale(1,1)';

    for(let i = 2;i<=7;i++){
        setTimeout(()=>{
            document.getElementById(i==7?'wyf':'a'+i).style.opacity = 1;
        },200*i)
       
    }
    
}



const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let lastPos = { x: 0, y: 0 };

// Retina适配‌:ml-citation{ref="3,6" data="citationList"}
function initCanvas() {
    canvas.width = screenWidtht*2;
    canvas.height = screenHeight*2;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    
}
initCanvas();

// 坐标转换优化‌:ml-citation{ref="3,8" data="citationList"}
function getPosition(e) {
    const rect = canvas.getBoundingClientRect();
    const clientX = e.clientX || (e.touches && e.touches[0].clientX);
    const clientY = e.clientY || (e.touches && e.touches[0].clientY);
    return {
        x: clientX*2,
        y:clientY*2
    };
}

// 事件处理优化‌:ml-citation{ref="1,7" data="citationList"}
canvas.addEventListener('mousedown', start);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', end);
canvas.addEventListener('mouseout', end);

canvas.addEventListener('touchstart', function(e) {
    e.preventDefault();
    
    start(e);
}, { passive: false });

canvas.addEventListener('touchmove', function(e) {
    e.preventDefault();
    draw(e);
}, { passive: false });

canvas.addEventListener('touchend', end);

function start(e) {
    isDrawing = true;
    lastPos = getPosition(e);
}

function draw(e) {

    if (!isDrawing) return;
    
    const currentPos = getPosition(e);
    ctx.beginPath();
    ctx.strokeStyle="white";
    ctx.lineWidth = 6;
    
    ctx.moveTo(lastPos.x, lastPos.y);
    ctx.lineTo(currentPos.x, currentPos.y);
    ctx.stroke();
    
    lastPos = currentPos;
}

function end() {
    isDrawing = false;
    ctx.beginPath();
}

function qingchu(){
    ctx.clearRect(0 ,0,9999,9999);
}



function uploadCanvas() {
    var canvas = document.getElementById('canvas'); // 获取Canvas元素
    var dataURL = canvas.toDataURL('image/png'); // 获取Canvas的DataURL
 
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://api.fengjunjie.com.cn/img.php', true);
    xhr.onload = function () {
        if (this.status === 200) {
            console.log('Image uploaded successfully!');
            console.log(this.responseText); // 打印服务器响应
            var qing = document.querySelector('.qing');
            qing.style.display = 'none'


            var wyf = document.getElementById('wyf');
            wyf.src = dataURL;

        } else {
            console.error('Error uploading image.');
        }
    };
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置请求头，因为我们发送的是表单数据
    xhr.send('image=' + encodeURIComponent(dataURL)); // 发送DataURL到服务器
}




function save() {

    var canvas = document.getElementById('canvas'); // 获取Canvas元素
    uploadCanvas();

    
    // const link = document.createElement('a');
    // link.download = `drawing-${Date.now()}.png`;
    // link.href = canvas.toDataURL();
    // link.click();
}





</script>
</body>
</html>
